{% extends 'common/userpublic.html' %}
{% load static %}

{% block head %}
    <link href="{% static 'css/check.css' %}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block header %}
    绑定新手机号
{% endblock %}

{% block body %}
    <form action="" method="post">
        {% csrf_token %}
        <input type="hidden" name="id" value="{{ id }}">
        <div style="height: 49px;"></div>
        <div class="pay-iphone">请填写新手机号并进行验证</div>
        <div class="pay-box">
            <input type="text" placeholder="请输入新手机号" name="phone_num" id="phone_num" value="{{ data.phone_num }}"/>
            <p>{{ form.errors.phone_num }}</p>
            <input type="button" value="获取验证码" class="pay-box-btn"/>
        </div>
        <input type="text" placeholder="请输入验证码" class="login-password"/>
        <input type="submit" class="login-btn" value="确认">
        <div class="bound-text">
            <h2>手机绑定规则</h2>
            <p>1.一个手机号码只可以绑定一个账户；</p>
            <p>2.如果无法绑定手机，请联系客服协助解决。</p>
        </div>
    </form>
{% endblock %}

{% block foot_js %}
    <script type="application/javascript">
        {#页面加载完再执行#}
        $(function () {
            $('.yzm-hq').on('click', function () {
                {#绑定点击事件#}
                var phone_num = $('#phone_num').val();
                var re = /^1[3-9]\d{9}$/;
                {#获取手机号,然后正则验证#}
                if (!re.test(phone_num)) {
                    alert('手机号码格式不正确!');
                    return;
                }

                var self = this;
                {#绑定获取验证码按钮#}
                //发送ajax请求
                $.ajax({
                    type: 'post',
                    url: '{% url "user:发送验证码" %}',
                    data: {'phone_num': phone_num, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                    dataType: 'json',
                    success: function (data) {
                        //响应数据,判断是否成功
                        if (data.error == 0) {
                            //发送成功按钮变灰色
                            $('.yzm-hq').css("background-color", 'gray');
                            //禁止点击
                            $(self).prop('disabled', true);
                            //显示倒计时
                            var time = 120;
                            var msg = time + '秒后重新发送';
                            $(self).val(msg); //更改注册按钮的值
                            var timer = window.setInterval(function () {
                                //设定定时执行方法
                                time -= 1;
                                if (time == 0) {
                                    //倒计时结束变回原样
                                    $('.yzm-hq').css("background-color", '#76bb2a');
                                    $(self).prop('disabled', false);
                                    $(self).val('获取验证码');
                                    //清除定时方法
                                    window.clearInterval(timer);
                                    return;
                                }
                                msg = time + '秒后重新发送';
                                $(self).val(msg)
                            }, 1000); //毫秒
                        } else {
                            alert(data.errmsg)
                        }
                    }

                })
            })
        });
    </script>
{% endblock %}

{% block foot_js %}
    <script type="application/javascript">
        {#页面加载完再执行#}
        $(function () {
            $('.yzm-hq').on('click', function () {
                {#绑定点击事件#}
                var phone_num = $('#phone_num').val();
                var re = /^1[3-9]\d{9}$/;
                {#获取手机号,然后正则验证#}
                if (!re.test(phone_num)) {
                    alert('手机号码格式不正确!');
                    return;
                }

                var self = this;
                {#绑定获取验证码按钮#}
                //发送ajax请求
                $.ajax({
                    type: 'post',
                    url: '{% url "user:发送验证码" %}',
                    data: {'phone_num': phone_num, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                    dataType: 'json',
                    success: function (data) {
                        //响应数据,判断是否成功
                        if (data.error == 0) {
                            //发送成功按钮变灰色
                            $('.yzm-hq').css("background-color",'gray');
                            //禁止点击
                            $(self).prop('disabled', true);
                            //显示倒计时
                            var time = 120;
                            var msg = time + '秒后重新发送';
                            $(self).val(msg); //更改注册按钮的值
                            var timer = window.setInterval(function () {
                                //设定定时执行方法
                                time -= 1;
                                if (time == 0) {
                                    //倒计时结束变回原样
                                    $('.yzm-hq').css("background-color", '#76bb2a');
                                    $(self).prop('disabled', false);
                                    $(self).val('获取验证码');
                                    //清除定时方法
                                    window.clearInterval(timer);
                                    return;
                                }
                                msg = time + '秒后重新发送';
                                $(self).val(msg)
                            }, 1000); //毫秒
                        }else {
                            alert(data.errmsg)
                        }
                    }

                })
            })
        });
    </script>
{% endblock %}